<template>
	<div>
		<swiper>
			<swiper-item v-for="(item, index) in banners" :key="index">
				<a :href="item.link">
					<img :src="item.image" @load="imageLoad">
				</a>
			</swiper-item>
		</swiper>
	</div>	
</template>

<script>
	//1.导入轮播图组件 index.js
	import {Swiper, SwiperItem} from 'components/common/swiper/index.js'
	
	export default {
		name:"HomeSwiper",
		data(){
			return {
				isLoad: false
			}
		},
		props: {
			banners: {
				type: Array,
				default(){
					return []
				}
			}
		},
		components: {  //2.注册组件
			Swiper,
			SwiperItem
		},
		methods: {
			imageLoad(){
				//console.log('~~~~')
				
				if(!this.isLoad){
					this.$emit('swiperImageLoad')
				}
				
				this.isLoad = true
			}
		}
	}
</script>

<style>
</style>
